﻿@model  IQueryable<WorkBasket.Data.Entities.Unit>
@{
    ViewBag.Title = "Index";
}

@section Scripts{
    <script src="~/Scripts/app/Design/DesignController.js"></script>
}
 
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-wrench"></span>&nbsp;Design</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav"></ul>
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div class="row" ng-controller="wbdsDesignCTRL" ng-cloak>
    <div class="col-md-3">


        <div class="panel panel-primary"> 
            <div class="panel-heading">
                <h5>Business Units</h5>
            </div>
            <div class="panel-body">
                <div class="panel-group" id="accordion" ng-repeat="Unit in Units">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <table>
                                <tr>
                                    <td width="100%">
                                        <h4 class="panel-title">
                                            <a data-toggle="collapse" data-parent="#accordion" href="#{{Unit.UnitID}}">
                                                {{Unit.UnitName}}
                                            </a>
                                        </h4>
                                    </td>
                                    <td>

                                        <button class="btn btn-default btn-sm" data-toggle="modal" ng-click="SelectUnit(Unit);" data-target="#Mod{{Unit.UnitID}}">
                                            <span class="glyphicon glyphicon-th-list"></span>
                                        </button>
                                    </td>
                                </tr>
                            </table>

                            <!-- Modal -->
                            <div class="modal fade" id="Mod{{Unit.UnitID}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                            <h4 class="modal-title" id="myModalLabel">{{SelectedUnit.UnitName}} Properties</h4>
                                        </div>
                                        <div class="modal-body">
                                            <label class="label label-default ">Entity Name</label>
                                            <input class="form-control" ng-model="Unit.UnitName" />
                                            <div class="panel panel-default">
                                                <div class="panel-heading">Where does {{SelectedUnit.UnitName}} get it's members?</div>
                                                <div class="panel-body">
                                                    <ul class="list-unstyled">
                                                        <li>
                                                            <input ng-model="Unit.IsPublicConnection" type="checkbox" class="checkbox checkbox-inline" />&nbsp; Public Connections (Facebook, Linkedin, Direct Logins, etc.)
                                                        </li>
                                                        <li>
                                                            <input type="checkbox" class="checkbox checkbox-inline" ng-model="SelectedUnit.IsPrivateConnection" />&nbsp; Enterprise Connection
                                                            <div>

                                                                <table class="table table-condensed table-hover" ng-hide="!SelectedUnit.IsPrivateConnection">
                                                                    <thead>
                                                                        <tr>
                                                                            <th>
                                                                                <button class="btn btn-sm btn-success" ng-click="AddDomain(SelectedUnit)"><span class="glyphicon glyphicon-plus"></span></button> Domain
                                                                            </th>
                                                                            <th>Key</th>
                                                                            <th></th>
                                                                            <th></th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody ng-repeat="Domain in SelectedDomains">
                                                                        <tr>
                                                                            <td>
                                                                                <div class="form-inline">
                                                                                    <input class="form-control" ng-model="Domain.DomainName" placeholder="Domain Name"
                                                                                           ng-change="ValidateDomain(Domain)"
                                                                                           ng-model-options="{ updateOn: 'blur' }" />

                                                                                </div>
                                                                            </td>
                                                                            <td>
                                                                                <input class="form-control"
                                                                                       ng-model="Domain.DomainKey"
                                                                                       ng-change="ValidateDomain(Domain)"
                                                                                       ng-model-options="{ updateOn: 'blur' }">
                                                                            </td>
                                                                            <td>
                                                                                <button class="btn btn-sm btn-danger" ng-click="RemoveDomain(SelectedUnit,Domain)"><span class="glyphicon glyphicon-remove"></span></button>
                                                                            </td>
                                                                            <td>
                                                                                <div class="form-group">
                                                                                    <span style="color=green" class="glyphicon glyphicon-ok" ng-hide="!Domain.IsValid"></span>
                                                                                    <span style="color=red" class="glyphicon glyphicon-ban-circle" ng-hide="Domain.IsValid"></span>
                                                                                </div>
                                                                            </td>

                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="SaveUnitProperties(Unit)">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--End Modeal-->
                        </div>
                        <div id="{{Unit.UnitID}}" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul>
                                    <li><a href="#" ng-click="SelectUnit(Unit);">Groups and Invitations</a></li>
                                    <li><a href="/Design/Design/Workflow/{{Unit.UnitID}}">Workflow Design</a></li>
                                    <li><a href="/Design/Design/Form/{{Unit.UnitID}}">Form Design</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="panel-footer">
                <button class="btn btn-success" ng-click="AddUnit()"><span class="glyphicon glyphicon-plus" /></button>
            </div>
           
        </div>
        <pre>{{SelectedUnit | json}}</pre>
        <pre>{{SelectedDomains | json}}</pre>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default" ng-hide="!SelectedUnit">
                    <div class="panel-heading">{{SelectedUnit.UnitName}} Groups</div>
                    <div class="panel-body">
                        <ul ng-repeat="Group in SelectedUnitGroups" class="nav nav-pills nav-stacked">
                            <li>
                                <span class="form-inline">
                                    <input ng-model="Group.GroupName"
                                           ng-change="UpdateGroup(Group)"
                                           ng-model-options="{ updateOn: 'blur' }"
                                           class="form-control" />
                                    <button ng-click="SelectGroup(Group)" class="btn btn-default"><span class="glyphicon glyphicon-ok" /></button>
                                    <button ng-click="DeleteGroup(Group)" class="btn btn-danger"><span class="glyphicon glyphicon-remove" /></button>
                                </span>
                            </li>

                        </ul>
                    </div>
                    <div class="panel-footer"><button ng-click="AddGroup()" class="btn btn-success"><span class="glyphicon glyphicon-plus" /></button></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">

                <div class="panel panel-default" ng-hide="!SelectedGroup">
                    <div class="panel-heading">{{SelectedGroup.GroupName}} Properties</div>
                    <div class="panel-body">
                        <table>
                            <thead>
                                <tr>
                                    <th>Property</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody ng-repeat="GroupProperty in SelectedGroupPropertys">
                                <tr>
                                    <td>
                                        <input ng-model="GroupProperty.PropertyName"
                                               ng-change="UpdateProperty(GroupProperty)"
                                               ng-model-options="{ updateOn: 'blur' }"
                                               class="form-control" />
                                    </td>
                                    <td>
                                        <input ng-model="GroupProperty.PropertyValue"
                                               class="form-control"
                                               ng-change="UpdateProperty(GroupProperty)"
                                               ng-model-options="{ updateOn: 'blur' }" />
                                    </td>
                                    <td> <button ng-click="DeleteProperty(GroupProperty)" class="btn btn-danger"><span class="glyphicon glyphicon-remove" /></button></td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <div class="panel-footer"><button ng-click="AddGroupProperty()" class="btn btn-success"><span class="glyphicon glyphicon-plus" /></button></div>

                </div>

            </div>
        </div>
    </div>
    <div class="col-md-5">
        <div class="panel panel-default" ng-hide="!SelectedGroup">
            <div class="panel-heading">
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#Members">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
                {{SelectedGroup.GroupName}} Members
            </div>
            <div class="panel-body">
                <table ng-hide="SelectedGroupMemebers.length<=0" class="table table-hover table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody ng-repeat="GroupMember in SelectedGroupMemebers">
                        <tr>
                            <td>
                                <label class="form-control">{{GroupMember.name}}</label>
                            </td>
                            <td>
                                <label 
                                       class="form-control" >{{GroupMember.email}}</label>
                            </td>
                            <td> <button ng-click="DeleteMember(GroupMember)" class="btn btn-danger"><span class="glyphicon glyphicon-remove" /></button></td>
                        </tr>
                    </tbody>
                </table>

                <!-- Modal -->
                <div class="modal fade" id="Members" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title" id="myModalLabel">Search</h4>
                            </div>
                            <div class="modal-body">

                                <form class="form-inline" role="form">
                                    <div class="form-group">
                                        <label class="sr-only" for="searchEmail">Email</label>
                                        <input type="email" class="form-control" id="searchEmail" placeholder="Enter email" ng-model="SearchEmail">
                                    </div>
                                    <div class="form-group">
                                        <h4>or</h4>
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="searchName">Name</label>
                                        <input type="text" class="form-control" id="searchName" placeholder="Name" ng-model="SearchName">
                                    </div>

                                    <button type="submit" class="btn btn-primary" ng-click="Search()"><span class="glyphicon glyphicon-search"></span></button>
                                </form>
                                <div class="alert alert-warning" role="alert" ng-hide="!NotFoundMember">
                                    Sorry,  {{NotFoundMember}} is not among MyWorkbasket's registered users.  Would you like to send an invitation to join MyWorkbasket?
                                    <button class="btn btn-success" ng-click="SendBlindInvite(NotFoundMember)"><span class="glyphicon glyphicon-envelope" /></button>
                                   
                               </div>


                                <table class="table table-hover  table-striped">
                                    <thead>
                                    <th>&nbsp;</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Actions</th>
                                    </thead>
                                    <tbody ng-repeat="User in SearchResults">
                                        <tr>
                                            <td><img style="height:50px;width:50px;" src="{{User.picture}}" /></td>

                                            <td>{{User.name}}</td>
                                            <td>{{User.email}}</td>
                                            <td> <button class="btn btn-success" ng-click="SendInvite(User)"><span class="glyphicon glyphicon-envelope" /></button></td>
                                        </tr>
                                    </tbody>
                                </table>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-footer"><button ng-click="AddGroupProperty()" class="btn btn-success"><span class="glyphicon glyphicon-plus" /></button></div>

        </div>

    </div>

</div>
